<template>
	<div id="app">
		<div style="height: 20px;display:flex;align-items: center;">
			<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">查看所有未处理订单</span>
		</div>
		<template>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed label="序号" type="index" width="50">
				</el-table-column>
				<el-table-column prop="orderId" label="订单ID" width="180">
				</el-table-column>
				<el-table-column prop="orderOwner" label="订单收货人名称" width="180">
				</el-table-column>
				<el-table-column prop="orderDeliveryAddress" label="发货地址" min-width="180">
				</el-table-column>

				<el-table-column prop="orderAddress" label="订单收货地址" width="180">
				</el-table-column>
				<el-table-column prop="orderAmount" label="订单总金额" width="180">
				</el-table-column>
				<el-table-column prop="staffId" label="指派工作人员Id" width="180">
				</el-table-column>
				<el-table-column prop="orderDetailsItems" label="订单详情" width="180">
				</el-table-column>

				<!-- 				<el-table-column v-for="(item, index) in tableData.orderDetails" :key="index" label="订单详情表Id" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.orderDetails[index].eName}}</span>
					</template>

				</el-table-column> -->
				<el-table-column prop="orderStatus" label="订单支付状态" :formatter="stateFormat" width="180">
				</el-table-column>
				<el-table-column prop="userId" label="订单创建者Id" width="180">
				</el-table-column>
				<el-table-column prop="orderCreatetime" label="创建时间" width="180" sortable>
					<template slot-scope="scope">
						<div>
							<div>{{ scope.row.orderCreatetime | formatDate }}</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>

	</div>
</template>

<script>
	import request from '@/utils/axios/request.js'
	export default {
		
		data() {
			return {
				
				token: '',
				drawer: false,
				direction: 'rtl',
				tableData: [{
					orderId: '',
					orderOwner: '',
					orderPhone: '',
					orderDeliveryAddress: '',
					orderAddress: '',
					orderCreatetime: '',
					orderAmount: '',
					staffId: '',
					orderDetailsId: '',
					orderStatus: '',
					userId: '',
					orderIsShowToUser: '',
					orderDetailsItems: '',
					orderDetails: [{
						eName: '',
						eRealprice: '',
						eCount: ''
					}]

				}]
			}
		},
		methods: {
			stateFormat(row, column) {
				if (row.orderStatus === true) {
					return '已支付'
				} else {
					return '未支付'
				}
			},
			findimage(row) {
				console.log(row)
			},

		},
		created() {
			request({
					method: 'get',
					url: '/orders/historicalOrders',
					// headers: {
					// 	token: this.t
					// }
				})
				.then((res) => {
					// console.log('res')
					// console.log(res)
					// console.log('res')
					var jsonObj = JSON.parse(JSON.stringify(res.data.data));
					this.tableData = jsonObj;
					for (var i = 0; i < this.tableData.length; i++) {
						// console.log(this.tableData[i])
						var orderDetailsJsonObj = JSON.parse(JSON.stringify(this.tableData[i].orderDetailsList));
						// console.log('orderDetailsJsonObj')
						// console.log(orderDetailsJsonObj)

						let t = orderDetailsJsonObj.map((obj) => {
							return " " + obj.eName + " " + "￥" + obj.eRealprice + " " + obj.eCount + "件"
						}).join(",")
						// console.log(t)
						this.tableData[i].orderDetailsItems = t
						// console.log('orderDetailsJsonObj')
						let orderItems = this.tableData[i].orderDetailsList.join(",");
					}

				})


		}
	}
</script>

<style scoped>
</style>